<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <!-- 外部资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 田园风格自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-garden { background-color: #f9f5f0; } /* 田园米白 */
            .bg-garden-emerald { background-color: #166534; } /* 田园深绿 */
            .bg-garden-amber { background-color: #c2410c; } /* 田园暖橙 */
            .text-garden-emerald { color: #166534; } /* 文字深绿 */
            .text-garden-amber { color: #c2410c; } /* 文字暖橙 */
            .text-garden-light { color: #4d7c0f; } /* 文字浅绿 */
            .border-garden { border-color: #e8dcc8; } /* 边框米棕 */
            .shadow-garden { box-shadow: 0 4px 12px rgba(22, 101, 52, 0.1); } /* 田园阴影 */
            .font-garden { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* 田园字体 */
        }
    </style>
</head>
<body class="font-garden bg-white text-garden-emerald">
    <!-- 页面头部（导航+语言切换） -->
    <header class="bg-garden border-b border-garden sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <!-- 游戏Logo（田园风：麦穗+小木屋组合） -->
            <a href="#" class="flex items-center gap-2">
                <img src="https://picsum.photos/id/292/60/60" alt="田园物语Logo" class="rounded-full border-2 border-garden-emerald">
                <h1 class="text-2xl font-bold text-garden-emerald hidden sm:block"><?php echo $t['siteTitle']; ?></h1>
                <h1 class="text-xl font-bold text-garden-emerald sm:hidden">田园物语</h1>
            </a>

            <!-- 桌面端导航菜单 -->
            <nav class="hidden md:flex items-center gap-6">
                <?php foreach($t['nav'] as $item): ?>
                    <?php if(isset($item['isCta']) && $item['isCta']): ?>
                        <!-- 突出按钮（CTA：预约按钮） -->
                        <a href="<?php echo $item['link']; ?>" class="bg-garden-amber text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-opacity-90 transition-all shadow-garden transform hover:-translate-y-0.5">
                            <?php echo $item['name']; ?>
                        </a>
                    <?php else: ?>
                        <a href="<?php echo $item['link']; ?>" class="text-garden-emerald hover:text-garden-amber transition-colors text-sm font-medium relative group">
                            <?php echo $item['name']; ?>
                            <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-garden-amber transition-all duration-300 group-hover:w-full"></span>
                        </a>
                    <?php endif; ?>
                <?php endforeach; ?>
            </nav>

            <!-- 多语言切换（下拉菜单） -->
            <div class="relative">
                <button class="flex items-center gap-1 text-garden-emerald focus:outline-none" id="langToggle">
                    <img src="https://picsum.photos/id/106/20/20" alt="语言图标" class="rounded border border-garden">
                    <?php echo $t['lang'][$lang]; ?>
                    <i class="fa fa-chevron-down text-xs transition-transform duration-300" id="langChevron"></i>
                </button>
                <div class="absolute right-0 mt-2 w-32 bg-white rounded-lg shadow-garden py-2 hidden z-10 transform transition-all duration-300 origin-top-right" id="langDropdown">
                    <?php foreach($availableLangs as $l): ?>
                        <a href="?lang=<?php echo $l; ?>" class="block px-4 py-2 text-sm text-garden-emerald hover:bg-garden transition-colors">
                            <?php echo $t['lang'][$l]; ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-garden-emerald focus:outline-none" id="mobileMenuBtn">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>

        <!-- 移动端菜单（展开式） -->
        <div class="md:hidden bg-white shadow-garden absolute w-full left-0 top-full hidden transform transition-all duration-300 origin-top" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col gap-3">
                <?php foreach($t['nav'] as $item): ?>
                    <?php if(isset($item['isCta']) && $item['isCta']): ?>
                        <a href="<?php echo $item['link']; ?>" class="bg-garden-amber text-white px-5 py-2 rounded-full text-sm font-medium text-center hover:bg-opacity-90 transition-all">
                            <?php echo $item['name']; ?>
                        </a>
                    <?php else: ?>
                        <a href="<?php echo $item['link']; ?>" class="text-garden-emerald py-2 border-b border-garden hover:text-garden-amber transition-colors">
                            <?php echo $item['name']; ?>
                        </a>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
    </header>

    <!-- 英雄区（核心视觉+行动按钮） -->
    <section class="hero bg-garden py-16 md:py-24 relative overflow-hidden">
        <!-- 田园背景图（半透明叠加） -->
        <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/id/152/1920/1080');"></div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-garden-emerald leading-tight mb-6 animate-fade-in-up">
                    <?php echo $t['hero']['title']; ?>
                </h2>
                <p class="text-lg md:text-xl text-garden-light mb-10 animate-fade-in-up animation-delay-200">
                    <?php echo $t['hero']['subtitle']; ?>
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4 mb-10 animate-fade-in-up animation-delay-400">
                    <!-- 主按钮：立即预约 -->
                    <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="bg-garden-emerald text-white px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition-all shadow-garden transform hover:-translate-y-1">
                        <?php echo $t['hero']['cta1']['text']; ?>
                    </a>
                    <!-- 次按钮：观看宣传片 -->
                    <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="bg-white text-garden-emerald border border-garden-emerald px-8 py-3 rounded-full font-medium flex items-center justify-center gap-2 hover:bg-garden transition-all shadow-garden transform hover:-translate-y-1">
                        <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i>
                        <?php echo $t['hero']['cta2']['text']; ?>
                    </a>
                </div>
                <!-- 上线时间（田园风标签） -->
                <div class="inline-block bg-amber-100 text-garden-amber px-4 py-1 rounded-full text-sm shadow-sm animate-fade-in-up animation-delay-600">
                    <?php echo $t['hero']['version']; ?>
                </div>
            </div>
        </div>
    </section>

    <!-- 游戏特色（核心玩法展示） -->
    <section id="features" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-garden-amber font-medium mb-2 reveal-element"><?php echo $t['features']['pretitle']; ?></p>
                <h2 class="text-3xl md:text-4xl font-bold text-garden-emerald mb-4 reveal-element"><?php echo $t['features']['title']; ?></h2>
                <p class="text-garden-light max-w-2xl mx-auto reveal-element"><?php echo $t['features']['subtitle']; ?></p>
            </div>

            <!-- 特色卡片网格（田园风：木质质感卡片） -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach($t['features']['items'] as $index => $item): ?>
                <div class="bg-garden p-6 rounded-xl border border-garden hover:shadow-garden transition-all transform hover:-translate-y-2 reveal-element" style="transition-delay: <?php echo $index * 100; ?>ms">
                    <div class="w-12 h-12 bg-emerald-100 text-garden-emerald rounded-full flex items-center justify-center mb-4">
                        <i class="fa <?php echo $item['icon']; ?> text-xl"></i>
                    </div>
                    <h3 class="text-xl font-medium text-garden-emerald mb-3"><?php echo $item['title']; ?></h3>
                    <p class="text-garden-light"><?php echo $item['desc']; ?></p>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- 角色介绍（田园职业展示） -->
    <section id="characters" class="py-20 bg-garden">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-garden-amber font-medium mb-2 reveal-element"><?php echo $t['characters']['pretitle']; ?></p>
                <h2 class="text-3xl md:text-4xl font-bold text-garden-emerald mb-4 reveal-element"><?php echo $t['characters']['title']; ?></h2>
                <p class="text-garden-light max-w-2xl mx-auto reveal-element"><?php echo $t['characters']['subtitle']; ?></p>
            </div>

            <!-- 角色卡片横向滚动（适配移动端） -->
            <div class="overflow-x-auto pb-8 -mx-4 px-4">
                <div class="flex gap-6 min-w-max">
                    <?php foreach($t['characters']['items'] as $index => $item): ?>
                    <div class="w-64 bg-white rounded-xl overflow-hidden shadow-garden hover:shadow-lg transition-all border border-garden transform hover:-translate-y-2 reveal-element" style="transition-delay: <?php echo $index * 150; ?>ms">
                        <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" class="w-full h-80 object-cover">
                        <div class="p-5">
                            <h3 class="text-xl font-medium text-garden-emerald mb-2"><?php echo $item['name']; ?></h3>
                            <p class="text-garden-amber text-sm mb-3"><?php echo $item['class']; ?></p>
                            <p class="text-garden-light text-sm"><?php echo $item['desc']; ?></p>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- 查看全部角色按钮 -->
            <div class="text-center mt-8 reveal-element">
                <a href="#" class="inline-flex items-center gap-2 text-garden-emerald hover:text-garden-amber transition-colors font-medium group">
                    <?php echo $t['characters']['moreLink']; ?>
                    <i class="fa fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 游戏截图（田园场景展示） -->
    <section id="screenshots" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-garden-amber font-medium mb-2 reveal-element"><?php echo $t['screenshots']['pretitle']; ?></p>
                <h2 class="text-3xl md:text-4xl font-bold text-garden-emerald mb-4 reveal-element"><?php echo $t['screenshots']['title']; ?></h2>
                <p class="text-garden-light max-w-2xl mx-auto reveal-element"><?php echo $t['screenshots']['subtitle']; ?></p>
            </div>

            <!-- 截图网格（响应式布局） -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <?php foreach($t['screenshots']['items'] as $index => $item): ?>
                <div class="rounded-lg overflow-hidden shadow-garden hover:scale-105 transition-transform cursor-pointer reveal-element" style="transition-delay: <?php echo $index * 100; ?>ms">
                    <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" class="w-full h-48 object-cover">
                </div>
                <?php endforeach; ?>
            </div>

            <!-- 查看更多截图按钮 -->
            <div class="text-center mt-12 reveal-element">
                <a href="#" class="inline-flex items-center gap-2 text-garden-emerald hover:text-garden-amber transition-colors font-medium group">
                    <?php echo $t['screenshots']['moreLink']; ?>
                    <i class="fa fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 游戏预告片（视频模块） -->
    <section id="trailer" class="py-20 bg-garden">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-garden-amber font-medium mb-2 reveal-element"><?php echo $t['trailer']['pretitle']; ?></p>
                <h2 class="text-3xl md:text-4xl font-bold text-garden-emerald mb-4 reveal-element"><?php echo $t['trailer']['title']; ?></h2>
                <p class="text-garden-light max-w-2xl mx-auto reveal-element"><?php echo $t['trailer']['subtitle']; ?></p>
            </div>

            <!-- 预告片封面（带播放按钮） -->
            <div class="max-w-4xl mx-auto relative reveal-element">
                <div class="rounded-xl overflow-hidden shadow-garden">
                    <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-auto">
                    <!-- 播放按钮（居中悬浮） -->
                    <div class="absolute inset-0 flex items-center justify-center">
                        <button class="w-20 h-20 bg-garden-emerald bg-opacity-80 text-white rounded-full flex items-center justify-center hover:bg-opacity-90 transition-all transform hover:scale-110">
                            <i class="fa fa-play text-2xl ml-1"></i>
                        </button>
                    </div>
                </div>
                <!-- 视频信息（时长+发布日期） -->
                <div class="flex justify-between mt-4 text-sm text-garden-light">
                    <span><i class="fa fa-clock-o mr-1"></i> <?php echo $t['trailer']['duration']; ?></span>
                    <span><i class="fa fa-calendar mr-1"></i> <?php echo $t['trailer']['released']; ?></span>
                </div>
                <!-- 4K标签 -->
                <?php if(!empty($t['trailer']['moreLink'])): ?>
                <div class="text-center mt-6">
                    <span class="inline-block bg-emerald-100 text-garden-emerald px-3 py-1 rounded-full text-sm">
                        <?php echo $t['trailer']['moreLink']; ?>
                    </span>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- 社区论坛（田园邻里交流区） -->
    <section id="forum" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-garden-amber font-medium mb-2 reveal-element"><?php echo $t['forum']['pretitle']; ?></p>
                <h2 class="text-3xl md:text-4xl font-bold text-garden-emerald mb-4 reveal-element"><?php echo $t['forum']['title']; ?></h2>
                <p class="text-garden-light max-w-2xl mx-auto reveal-element"><?php echo $t['forum']['subtitle']; ?></p>
            </div>

            <!-- 论坛板块卡片（田园风：木质质感） -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
                <?php foreach($t['forum']['topics'] as $index => $topic): ?>
                <div class="bg-garden p-6 rounded-xl border border-garden hover:shadow-garden transition-all transform hover:-translate-y-2 reveal-element" style="transition-delay: <?php echo $index * 150; ?>ms">
                    <h3 class="text-lg font-medium text-garden-emerald mb-2"><?php echo $topic['name']; ?></h3>
                    <p class="text-garden-light text-sm mb-3"><i class="fa fa-comment-o mr-1"></i> <?php echo $topic['count']; ?> <?php echo $lang == 'zh' ? '个话题' : ($lang == 'en' ? 'topics' : ($lang == 'ja' ? '個の話題' : '개의 토픽')); ?></p>
                    <p class="text-garden-amber text-xs"><i class="fa fa-clock-o mr-1"></i> <?php echo $t['forum']['lastPost']; ?>: <?php echo $topic['lastPost']; ?></p>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- 进入论坛按钮 -->
            <div class="text-center mt-12 reveal-element">
                <a href="#" class="bg-garden-emerald text-white px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition-all shadow-garden transform hover:-translate-y-1">
                    <?php echo $t['forum']['cta']; ?>
                </a>
            </div>
        </div>
    </section>

    <!-- 最新动态（田园资讯） -->
    <section id="news" class="py-20 bg-garden">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <p class="text-garden-amber font-medium mb-2 reveal-element"><?php echo $t['news']['pretitle']; ?></p>
                <h2 class="text-3xl md:text-4xl font-bold text-garden-emerald mb-4 reveal-element"><?php echo $t['news']['title']; ?></h2>
                <p class="text-garden-light max-w-2xl mx-auto reveal-element"><?php echo $t['news']['subtitle']; ?></p>
            </div>

            <!-- 新闻卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <?php foreach($t['news']['items'] as $index => $item): ?>
                <div class="bg-white rounded-xl overflow-hidden shadow-garden hover:shadow-lg transition-all border border-garden transform hover:-translate-y-2 reveal-element" style="transition-delay: <?php echo $index * 200; ?>ms">
                    <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['title']; ?>" class="w-full h-48 object-cover">
                    <div class="p-5">
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-xs bg-emerald-100 text-garden-emerald px-2 py-1 rounded-full"><?php echo $item['category']; ?></span>
                            <span class="text-xs text-garden-light"><i class="fa fa-calendar-o mr-1"></i> <?php echo $item['date']; ?></span>
                        </div>
                        <h3 class="text-lg font-medium text-garden-emerald mb-3 line-clamp-2"><?php echo $item['title']; ?></h3>
                        <p class="text-garden-light text-sm mb-4 line-clamp-3"><?php echo $item['desc']; ?></p>
                        <a href="#" class="text-garden-amber text-sm font-medium hover:underline inline-flex items-center gap-1">
                            <?php echo $t['readMore']; ?>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- 查看所有动态按钮 -->
            <div class="text-center mt-12 reveal-element">
                <a href="#" class="inline-flex items-center gap-2 text-garden-emerald hover:text-garden-amber transition-colors font-medium group">
                    <?php echo $t['news']['moreLink']; ?>
                    <i class="fa fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 预注册（预约表单） -->
    <section id="pre-register" class="py-20 bg-garden-emerald text-white relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-0 left-0 w-full h-full bg-[url('https://picsum.photos/id/106/1200/800')] bg-cover bg-center"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-12 reveal-element">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4"><?php echo $t['preRegister']['title']; ?></h2>
                    <p class="text-emerald-100 max-w-2xl mx-auto"><?php echo $t['preRegister']['subtitle']; ?></p>
                    <!-- 预注册礼包（田园风标签） -->
                    <div class="inline-block bg-amber-600 text-white px-4 py-1 rounded-full text-sm mt-4">
                        <?php echo $t['preRegister']['gift']; ?>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
                                        <!-- 预注册表单 -->
                    <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg reveal-element">
                        <form class="space-y-5">
                            <div>
                                <label for="name" class="block text-garden-emerald font-medium mb-2"><?php echo $t['preRegister']['form']['name']; ?></label>
                                <input type="text" id="name" class="w-full px-4 py-3 border border-garden rounded-lg focus:outline-none focus:ring-2 focus:ring-garden-emerald transition-all" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>">
                            </div>
                            <div>
                                <label for="phone" class="block text-garden-emerald font-medium mb-2"><?php echo $t['preRegister']['form']['phone']; ?></label>
                                <input type="tel" id="phone" class="w-full px-4 py-3 border border-garden rounded-lg focus:outline-none focus:ring-2 focus:ring-garden-emerald transition-all" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>">
                            </div>
                            <div>
                                <label for="email" class="block text-garden-emerald font-medium mb-2"><?php echo $t['preRegister']['form']['email']; ?></label>
                                <input type="email" id="email" class="w-full px-4 py-3 border border-garden rounded-lg focus:outline-none focus:ring-2 focus:ring-garden-emerald transition-all" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>">
                            </div>
                            <div class="flex items-start">
                                <input type="checkbox" id="agreement" class="mt-1 text-garden-emerald focus:ring-garden-emerald">
                                <label for="agreement" class="ml-2 text-sm text-garden-light"><?php echo $t['preRegister']['form']['agreement']; ?></label>
                            </div>
                            <button type="submit" class="w-full bg-garden-amber text-white py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all shadow-garden transform hover:-translate-y-1">
                                <?php echo $t['preRegister']['form']['submit']; ?>
                            </button>
                        </form>
                    </div>

                    <!-- 游戏数据统计 -->
                    <div class="space-y-8 reveal-element">
                        <div class="grid grid-cols-2 gap-6">
                            <?php foreach($t['preRegister']['stats'] as $stat): ?>
                            <div class="bg-white bg-opacity-10 p-6 rounded-xl text-center">
                                <div class="text-4xl font-bold mb-2"><?php echo $stat['value']; ?></div>
                                <div class="text-emerald-100"><?php echo $stat['label']; ?></div>
                            </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- 预注册福利 -->
                        <div class="bg-white bg-opacity-10 p-6 rounded-xl">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-gift mr-2"></i>
                                预注册专属福利
                            </h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle mt-1 mr-2 text-amber-300"></i>
                                    <span>游戏正式上线后获得独家装扮套装</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle mt-1 mr-2 text-amber-300"></i>
                                    <span>稀有种子包，包含5种特殊作物种子</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle mt-1 mr-2 text-amber-300"></i>
                                    <span>提前3天体验游戏的特权</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle mt-1 mr-2 text-amber-300"></i>
                                    <span>游戏内货币1000金币</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚（底部信息） -->
    <footer class="bg-garden-emerald text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
                <!-- 游戏简介 -->
                <div class="lg:col-span-1">
                    <div class="flex items-center gap-2 mb-6">
                        <img src="https://picsum.photos/id/292/60/60" alt="田园物语Logo" class="rounded-full border-2 border-white">
                        <h3 class="text-xl font-bold"><?php echo $t['siteTitle']; ?></h3>
                    </div>
                    <p class="text-emerald-100 mb-6"><?php echo $t['footer']['description']; ?></p>
                    <!-- 社交媒体图标 -->
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-opacity-20 transition-all">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-opacity-20 transition-all">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-opacity-20 transition-all">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-opacity-20 transition-all">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>

                <!-- 快速链接 -->
                <div>
                    <h3 class="text-lg font-bold mb-6"><?php echo $t['footer']['links'][0]['title']; ?></h3>
                    <ul class="space-y-3">
                        <?php foreach($t['footer']['links'][0]['items'] as $item): ?>
                        <li>
                            <a href="<?php echo $item['link']; ?>" class="text-emerald-100 hover:text-white transition-colors">
                                <?php echo $item['name']; ?>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

                <!-- 支持与帮助 -->
                <div>
                    <h3 class="text-lg font-bold mb-6"><?php echo $t['footer']['links'][1]['title']; ?></h3>
                    <ul class="space-y-3">
                        <?php foreach($t['footer']['links'][1]['items'] as $item): ?>
                        <li>
                            <a href="<?php echo $item['link']; ?>" class="text-emerald-100 hover:text-white transition-colors">
                                <?php echo $item['name']; ?>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

                <!-- 订阅新闻 -->
                <div>
                    <h3 class="text-lg font-bold mb-6"><?php echo $t['footer']['subscribe']; ?></h3>
                    <p class="text-emerald-100 mb-4"><?php echo $t['footer']['subscribeDesc']; ?></p>
                    <form class="mb-4">
                        <div class="flex">
                            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none text-garden-emerald">
                            <button type="submit" class="bg-garden-amber px-4 py-2 rounded-r-lg hover:bg-opacity-90 transition-all">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    <p class="text-xs text-emerald-200"><?php echo $t['footer']['privacyNote']; ?></p>
                </div>
            </div>

            <!-- 法律链接 -->
            <div class="border-t border-emerald-700 pt-8 pb-4">
                <div class="flex flex-wrap gap-4 justify-center mb-6">
                    <?php foreach($t['footer']['legalLinks'] as $link): ?>
                    <a href="<?php echo $link['link']; ?>" class="text-emerald-100 hover:text-white transition-colors text-sm">
                        <?php echo $link['name']; ?>
                    </a>
                    <?php endforeach; ?>
                </div>

                <!-- 版权信息 -->
                <div class="text-center text-emerald-200 text-sm">
                    <?php echo $t['footer']['copyright']; ?>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 语言切换下拉菜单
        const langToggle = document.getElementById('langToggle');
        const langDropdown = document.getElementById('langDropdown');
        const langChevron = document.getElementById('langChevron');

        langToggle.addEventListener('click', () => {
            langDropdown.classList.toggle('hidden');
            langChevron.classList.toggle('rotate-180');
        });

        // 点击外部关闭下拉菜单
        document.addEventListener('click', (e) => {
            if (!langToggle.contains(e.target) && !langDropdown.contains(e.target)) {
                langDropdown.classList.add('hidden');
                langChevron.classList.remove('rotate-180');
            }
        });

        // 移动端菜单
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');

        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 滚动时导航栏效果
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2');
                header.classList.remove('py-4');
                header.classList.add('shadow-garden');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2');
                header.classList.remove('shadow-garden');
            }
        });

        // 滚动显示动画
        const revealElements = document.querySelectorAll('.reveal-element');
        
        function checkReveal() {
            const windowHeight = window.innerHeight;
            const revealPoint = 150;
            
            revealElements.forEach(element => {
                const revealTop = element.getBoundingClientRect().top;
                
                if (revealTop < windowHeight - revealPoint) {
                    element.classList.add('opacity-100', 'translate-y-0');
                    element.classList.remove('opacity-0', 'translate-y-10');
                }
            });
        }
        
        // 初始设置
        revealElements.forEach(element => {
            element.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-10');
        });
        
        // 初始检查
        checkReveal();
        
        // 滚动时检查
        window.addEventListener('scroll', checkReveal);
    </script>
</body>
</html>